layui.use(['table'], function () {
    var table = layui.table
        , form = layui.form;


    page({});
    //监听单元格事件
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'setSign') {
            layer.prompt({
                formType: 2
                , title: '修改 ID 为 [' + data.id + '] 的用户签名'
                , value: '<img src="' + data.imgHref + '"/>'
            }, function (value, index) {
                layer.close(index);

                //这里一般是发送修改的Ajax请求

                //同步更新表格和缓存对应的值
                obj.update({
                    sign: value
                });
            });
        }
    });
    //监听性别操作
    form.on('switch(sexDemo)', function (obj) {
        layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
    });
    //监听提交
    form.on('submit(sreach)',
        function (data) {
            data = data.field;
            //查询所有
            page(data);

            return false;
        });
});

function page(data) {
    layui.use(['table'], function () {
        var table = layui.table
            , form = layui.form;
        table.render({
            elem: '#test'
            , url: '/back/product/findAll'
            , cellMinWidth: 80
            , where: data//传递到后台的值
            , cols: [[
                {field: 'id', title: 'ID', width: 100, unresize: true, sort: true}
                , {field: 'name', title: '产品名称'}
                , {field: 'normalPrice', title: '正常价'}
                , {field: 'cuisineName', title: '菜系'}
                , {
                    field: 'imgHref',
                    title: '产品图片',
                    event: 'setSign',
                    minWidth: 120,
                    sort: true,
                    templet: '<div><img src="{{d.imgHref}}" width="30" height="30" ></div>'
                }
                , {field: 'isTop', title: '是否置顶', width: 85, templet: '#switchTpl', unresize: true}
                , {field: 'lock', title: '是否锁定', width: 110, templet: '#checkboxTpl', unresize: true}
                , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true
        });
    });
}
